<template>
    <Modal
            class-name="system-dict-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            title="字典项信息"
            width="650"
            @on-cancel="close">

        <Form :ref="validRef" :model="formData" :label-width="80" @submit.native.prevent j-loading="dict.saveInfo,dict.getInfo">
            <FormItem v-if="operateType === 'new' && parentParam.name" label="上级节点" prop="parentId" :rules="{required: true, message: '未获取到上级节点'}">
                <Input v-model="parentParam.name" placeholder="未获取到上级节点" disabled/>
            </FormItem>

            <FormItem label="字典名称" prop="name" :rules="{required: true, message: '请填写字典名称'}">
                <Input v-model="formData.name" placeholder="请输入字典名称" :disabled="operateType !== 'new' && readonly"/>
            </FormItem>

            <Row style="margin-bottom: 20px;">
	            <Col :span="18">
		            <FormItem label="字典编码" prop="code" :rules="{required: true, message: '请填写字典编码'}">
			            <Input v-model="formData.code" placeholder="请输入字典编码" :disabled="!!formData.id"/>
		            </FormItem>
	            </Col>
	            <Col :span="6">
		            <FormItem label="排序" prop="sort" :rules="{required: true, message: '请填写排序值'}">
			            <InputNumber :min="0" :step="1" v-model="formData.sort" placeholder="排序" style="width: 100%;"/>
		            </FormItem>
	            </Col>
            </Row>

	        <FormItem label="图片附件" prop="imageAttachments">
		        <lt-upload-image v-model="formData.imageAttachments" :disabled="readonly" multiple :maxSize="1" tip="单张图片最大1MB，最多上传5张图片。"/>
	        </FormItem>

	        <FormItem label="文件附件" prop="fileAttachments">
		        <lt-upload-file v-model="formData.fileAttachments" :disabled="readonly" multiple :maxSize="3" tip="单个文件最大2MB，最多上传3个文件。"/>
	        </FormItem>

            <FormItem label="值内容" prop="remark" :rules="{min:0, max: 255, message: '值内容0~255个字符'}">
                <Input v-model="formData.remark" type="textarea" placeholder="请输入值内容" :rows="3" resize="none" :disabled="readonly"/>
            </FormItem>
        </Form>

        <template slot="footer">
            <Button type="primary" class="button-wide" @click="submitHandler" :disabled="querying || submitting">提交</Button>
        </template>
    </Modal>
</template>

<script>
    import JBoot from "jboot-env";

    export default JBoot.form({
        data() {
            return {
                moduleName: 'dict'
            }
        },

        methods: {
            getDefFormData() {
                return {
                    parentId: this.parentParam.parentId || 0,
                    sort: 999
                };
            },

	        setResponseData (responseData){
            	const {sysAttachments, ...formData} = responseData ?? {};

            	this.$set(this, 'formData', {
            		...formData,
		            imageAttachments: this.getAttachmentByType(sysAttachments, 'image'),
		            fileAttachments: this.getAttachmentByType(sysAttachments, 'file'),
	            });
	        },

	        getSubmitData (){
            	const {imageAttachments, fileAttachments, ...formData} = this.formData;

		        if(imageAttachments?.length > 5) throw '最多上传5张';

		        if(fileAttachments?.length > 3) throw '最多上传3个';

            	return {
            		...formData,
		            sysAttachments: this.setAttachmentType(imageAttachments, 'image').concat(
		            	this.setAttachmentType(fileAttachments, 'file')
		            )
            	};
	        }
        }
    });
</script>

<style lang="scss">
    .system-dict-dialog-wrap {
        & .ivu-form-item {
            margin-bottom: 20px !important;

            &:last-child {
                margin-bottom: 5px !important;
            }
        }
    }
</style>
